<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>exam</title>
<meta name="viewport" content="width=device-width"/>
<meta charset="utf-8" />
<link rel="stylesheet" href="../../css/note.css"/>
<style>
label {
    margin-right: 10px;
}
.choices {
	margin: 10px 0;
}
.warning, #message {
	color: red;
}
</style>

</head>

<body>

第 <input id="page-no" type="number" value="1" min="1" style="width:50px"> 页,
共 <span id="page-total"></span> 页
<button onclick="jump(-1)">上一页</button>
<button onclick="jump(1)">下一页</button>

<form id="form"><ol id="main"></ol></form>

<button onclick="check()">提交</button>
<span id="message"></span>

<script>
var questions = [ {
	question:'以下乐队中最早接触的是',
	choices:[
		{label:'X Japan'},
		{label:'L\'Arc~en~Ciel'},
		{label:'白黒キネマ'},
		{label:'Acid Black Cherry', isAnswer:true}
	]}, {
	question:'以下课程，最不拿手的是',
	choices:[
		{label:'数学分析'},
		{label:'高等代数'},
		{label:'概率论', isAnswer:true},
	]}, {
	question:'以下和弦，最喜爱的是',
	choices:[
		{label:'Fmaj7'},
		{label:'Em(add9)', isAnswer:true},
		{label:'&sharp;Fm7(&flat;5)'},
		{label:'D7'}
	]}, {
	question:'家里养过几条狗',
	choices:[
		{label:'3'},
		{label:'4'},
		{label:'5', isAnswer:true},
		{label:'6'}
	]}, {
	question:'大学的遗憾？',
	choices:[
		{label:'没有恋爱'},
		{label:'没参加毕业典礼'},
		{label:'没有出走音乐节', isAnswer:true},
		{label:'没学完初等数论'}
	]}, {
	question:'学生时代的第一个座号是',
	choices:[
		{label:'10', isAnswer:true},
		{label:'4'},
		{label:'3'},
		{label:'7'},
	]}, {
	question:'洗澡的时候',
	choices:[
		{label:'固定喷头', isAnswer:true},
		{label:'把花洒拿在手中'},
	]}, {
	question:'习惯用什么输入法？',
	choices:[
		{label:'中州韻', isAnswer:true},
		{label:'微软五笔'},
		{label:'手机系统的默认输入法'},
	]}, {
	question:'喜欢甜食？',
	choices:[
		{label:'当然！', isAnswer:true},
		{label:'不！'},
	]}, {
	question:'什么时候开始自学日语的',
	choices:[
		{label:'初中'},
		{label:'高中', isAnswer:true},
		{label:'大学'},
		{label:'大学毕业后'}
	]},
];
</script>
<script>
(function(){

function shuffle(arr) {
    arr.sort(function(){return 0.5-Math.random()});
}

function alpha(n) {
    return String.fromCharCode(65+n); // A=0, B=1
}

function $(e) {
    if (e[0] == '#')
        return document.getElementById(e.slice(1));
    else if (e[0] == '.')
        return document.getElementByClassName(e.slice(1));
}

var main = $('#main');
var form = $('#form');
var jump = $('#jump');
var message = $('#message');
var $pageNo = $('#page-no');
var answers = [];
var pageLen = 10;
var pageTotal = Math.ceil(questions.length / pageLen);
$('#page-total').innerHTML = pageTotal;
$pageNo.setAttribute('max', pageTotal);
$pageNo.oninput = render;

function render() {
    var pageNo = $('#page-no').value;
    var buf = [];
    answers = [];
    var end = pageLen*pageNo, start = end-pageLen;
    questions.slice(start, end).forEach(function(q, i) {
        buf.push('<li>' + q.question);
        buf.push('<span class="warning"></span>' +
                     '<div class="choices">'
        );
        shuffle(q.choices);
        q.choices.forEach(function(c, j) {
            buf.push(
                '<label>' +
                    '<input type="radio" name="q' + i + '" value="' + j + '"> ' +
                    (alpha(j) + '. ' + c.label) +
                '</label>'
            );
            if (c.isAnswer) {
                answers.push(j);
            }
        });
        buf.push('</div></li>');
    });
    if (buf.length > 0) {
        main.setAttribute('start', start+1);
        main.innerHTML = buf.join('\n');
    } else
        main.innerHTML = '暂无数据';
    message.innerHTML = '';
}

function getRadioValue(name) {
	var radioGroup = form.elements[name];
	for (var i = 0; i < radioGroup.length; ++i)
		if (radioGroup[i].checked)
			return radioGroup[i].value;
}

window.check = function() {
    var warnings = document.getElementsByClassName('warning');
	var correct = 0;
	var isValid = true;
	for (var i = 0; i < answers.length; ++i) {
		var value = getRadioValue('q' + i);
		if (!value) {
			isValid = false;
			warnings[i].innerText = '请作答';
		} else {
			warnings[i].innerText = '';
		}
	}
	if (!isValid)
		return;
	for (var i = 0; i < answers.length; ++i) {
		var value = getRadioValue('q' + i);
		if (value != answers[i]) {
			var answer = alpha(answers[i]);
			warnings[i].innerText = '答案: ' + answer;
		} else {
			++correct;
		}
	}
	message.innerHTML = '成绩: ' + correct + '/' + answers.length;
}

window.jump = function(offset) {
    var target = parseInt($('#page-no').value) + offset;
    if (target >= 1 && target <= pageTotal) {
        $('#page-no').value = target;
        render();
    }
}

render();
})();
</script>
</body>
</html>
